<template>
	<view class="content">
			<view class="userList"  >
			 <!-- <view class="user_item fx-row" v-for="(item,index) in project" :key='item.id' @click="Selection(item,index)">
				<view class="picture mr26">
					<image :src="item.workPhoto" mode="widthFix" lazy-load></image>
					<span class="label" v-if="item.status==10">休息中</span>
				</view>
				<view class="fx-col-sb" style="height: 160rpx;">
					<view class="ft30">{{item.name}}</view> 
					<view class="fx-row-sta mt10 grey3">
						<view class="fx-row-sta">
							<image class="img_tip" src="@/static/picture/address1.png" mode="widthFix" lazy-load></image>
							<span class="mr4 ft24">{{item.distance}}km    </span>
						</view>
						<span class="ft20 ml10">|</span>
						<span class="ft20 ml10"> 超{{item.selectCount}}+人</span>
					</view> 
					<view class="mt32 fx-row-sta grey3">
						<image class="mr4" style="width:28rpx;height: 26rpx;" src="@/static/picture/shop.png" mode="widthFix" lazy-load></image>
						<span class="text-beyond ft24" style="width: 200rpx;">{{item.shopName}} </span> 
					</view>  
					<view class="item_float ft18 grey2">最早可约:{{item.appointmentTime}}</view>
					<view class="item_btn">选择</view> 
				</view> 
			 </view> -->   
			 <list :projectList='project' :state="state" @godetails='godetails' @collect='collect' @reserve='reserve' @Selection='Selection'></list> 
			 <uv-load-more :status="isLoading" fontSize='12' color='#696969' nomoreText=' '/>
		 </view>
	</view>
</template>

<script>
	import { massagistSelect,geturl,collection } from '@/utils/api.js' 
	import list from '@/components/technician-list.vue'
	import badgeMix from '@/common/mixins.js'
	export default { 
		components:{list}, 
		mixins: [badgeMix],
		data() {
			return { 
				isShow:true,
				project:[ ],
				isLoading:'nomore',  //是否加载中
				pageNum:1,//请求的页码
				pageSize:10,//请求的条数 
				serviceId:'', //项目id
				state:'0'
			}
		},
		onLoad(option) { 
			this.serviceId = option.id
			console.log("获取技师列表");  
			this.getjsList()
		},
		methods: {   
			// 技师列表
			getjsList(){
				console.log("获取技师列表");
				this.isLoading = 'loading'
				const  datas = {
					"current": this.pageNum,  //页码
					"size": this.pageSize,   //条数
					"lon":uni.getStorageSync('longitude'),  //经度
					"lat":uni.getStorageSync('latitude'),  //纬度
					"serviceId":this.serviceId,  //项目id
					//缺技师等级查询
				} 
				massagistSelect(datas).then((res) => {
					console.log(res);  
					if(res.code == '200'){
						const data = res.result.records   
						this.project = [...this.project,...data]
						if(data.length < this.pageSize){
							this.isLoading = 'nomore'
						}
					}
				})  
			},
			// 选择人员
			Selection(item,index){  
				console.log('选择技师的id',item.id);
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 2]; // 上一页     
				uni.navigateBack({
					success:function(){  
						// #ifdef H5
						beforePage.changePerson(item.id);
						// #endif
						// #ifndef H5
						beforePage.$vm.changePerson(item.id);
						// #endif
						// beforePage.$vm.changePerson(item.id); 
					}
				}) 
			},
			logins(){
				customUserUpdate(data).then((res) => {
				  console.log('成功', res);  
				}).catch((err) => { 
				  console.error('登录失败', err);
				}); 
			},
			// 技师详情
			godetails(item,index){ 
				uni.navigateTo({
					url:'/pages/technician/userDetail?id='+item.id
				})
			},
			// 技师收藏
			collect(item){
				console.log(item);
				this.isCollect(item.id).then((res)=>{
					item.userCollectionFlag = !item.userCollectionFlag
					item.userCollectionFlag?item.followCount=item.followCount+1:item.followCount!=0?item.followCount=item.followCount-1:item.followCount
					// this.project = []
					// this.pageNum = 1
					// this.getjsList() 
				})  
			},
		}, 
　　onReachBottom() {   
			if(this.isLoading=='nomore'){
				return;
			}
			this.pageNum++ 
			this.getjsList()
		},
	}
</script>

<style lang="scss">
	page{
		background-color:$uni-main-page ;
	}
	.head_nav{
		position: fixed;
		top: 0;
		width: 750rpx;	
		// height:calc( var(--status-bar-height) + 50px);  
		background-size:  100% auto; 
		z-index: 999; 
	}
	.uv-tabs{
		position: fixed;
		margin-top: -5rpx;
		width: 750rpx;	 
		height: 90rpx;
		background-color: #fff;
		border-radius: 12rpx 12rpx 0rpx 0rpx;
	} 
	.userList{
		position: relative;
		width: 690rpx;
		padding: 30rpx; 
		// margin-top:calc( var(--status-bar-height) + 105px);
		.user_item{
			position: relative;
			width:650rpx;
			padding: 20rpx;
			margin-bottom: 16rpx;
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.1);
			.picture{
				position: relative;
				width: 160rpx;
				height: 160rpx;
				border-radius:50%;
				overflow: hidden; 
				image{
					width: 100%;
				}
				.label{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 160rpx;
					background-color: rgba(0,0,0,0.4);
					font-size: 28rpx;
					color: #fff;
					text-align: center;
					line-height: 160rpx;
				}
			} 
			.img_tip{
				width: 20rpx;
				height: 20rpx;
				margin-right: 4rpx;
			}
			.item_float{
				position: absolute;
				right: 20rpx; 
				padding: 10rpx 14rpx;
				background: rgba(154, 193, 255, .3) ;
				border-radius: 4rpx;
				color: #5C9BFF;
				font-size: 20rpx;
				// opacity: 0.3;
			}
			.item_btn{
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				width: 178rpx;
				height: 60rpx; 
				background-color: $uni-main;
				border-radius: 30rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
</style>
